<template>
    <view class="content">
        <view class="header">
            <view class="header-row">
                <view class="mb2">
                    <uv-avatar size="60" :src="user.icon"></uv-avatar>
                </view>
                <view class="mb2">
                    <text>{{ user.name }}</text>
                </view>
                <view>
                    <text> 我的积分 {{ myuserintegral }}</text>
                </view>
            </view>

        </view>
        <view class="body">

            <view class="progress">
                <view class="progress-text">
                    <view>预警消息阅读率</view>
                    <view>{{
                        usercount.syscount ?
                        Math.floor(usercount?.syswatchcount / usercount?.syscount * 100) + '%'
                        : 0 + '%'
                    }}
                    </view>
                </view>
                <uv-line-progress activeColor="#FD754C" :showText="false"
                    :percentage="usercount.syscount ? Math.floor(usercount?.syswatchcount / usercount?.syscount * 100) : 0">
                </uv-line-progress>
            </view>

            <view class="body-content">


                <uv-cell-group :border="false">
                    <!-- <uv-cell :customStyle="customStyle" icon="setting-fill" @click="navigateTo('/pages/user/noticelist')"
                        isLink :title="$t('我的通知')">
                        <template v-slot:icon>
                            <uv-icon size="50rpx" name="search"></uv-icon>
                        </template>
                        <template v-slot:value>
                            <text class="count" v-if="!!state">{{ state > 99 ? 99 : state }}</text>
                        </template>
                    </uv-cell> -->
                    <uv-cell :customStyle="customStyle" :cellStyle="cellStyle" icon="setting-fill"
                        @click="navigateTo('/pages/user/updateuser')" isLink :title="$t('修改信息')">
                        <template v-slot:icon>
                            <uv-icon size="50rpx" name="search"></uv-icon>
                        </template>
                    </uv-cell>
                    <uv-cell :customStyle="customStyle" :cellStyle="cellStyle" icon="setting-fill" @click="unbind" isLink
                        :title="$t('微信解绑')">
                        <template v-slot:icon>
                            <uv-icon size="50rpx" isLink name="search"></uv-icon>
                        </template>
                    </uv-cell>
                    <uv-cell :customStyle="customStyle" :cellStyle="cellStyle" icon="setting-fill" :border="false"
                        @click="logout" isLink :title="$t('退出登录')">
                        <template v-slot:icon>
                            <uv-icon size="50rpx" name="search"></uv-icon>
                        </template>
                    </uv-cell>
                </uv-cell-group>
            </view>
        </view>
        <view class="bottom">
            版本号：1.2.6
        </view>
    </view>
</template>

<script setup lang="ts">
import api from '@/api';
import type { Iuser } from '@/interface';
import { inject, ref, type StyleValue } from 'vue';
import { useI18n } from 'vue-i18n';
import { navigateTo } from '@/util/navigator'
import { onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';


const p = defineProps<{ user: Iuser }>()

const refresh = inject<Function>('refresh', () => { })
const $t = useI18n().t

const customStyle: StyleValue = {
    color: 'rgba(102, 102, 102, 1)',
}
const cellStyle: StyleValue = {
    padding: '15px 15px'
}
const count = ref(0)
const state = ref(0)

interface Icount {
    syscount: number;
    syswatchcount: number;
}
const usercount = ref<Icount>({
    syscount: 0,
    syswatchcount: 0,
})

const myuserintegral = ref(0)

onShow(() => {
    api<Icount>('/wechat/comment/mywatchsyscomment').then(e => {
        usercount.value = e
    })

    api<{ num: string }>('/wechat/userintegral/myuserintegral').then(e => {
        myuserintegral.value = Number(e.num) || 0
    })
})


onMounted(() => {
    api<Icount>('/wechat/comment/mywatchsyscomment').then(e => {
        usercount.value = e
    })

    api<{ num: string }>('/wechat/userintegral/myuserintegral').then(e => {
        myuserintegral.value = Number(e.num) || 0
    })
})

function logout() {
    uni.showModal({
        title: $t('退出'),
        content: $t('确定要退出?'),
        success(res) {
            if (res.confirm) {
                api('/wechat/index/logout').then(e => {
                    refresh()
                })
            }
        },
    })
}

function unbind() {
    uni.showModal({
        title: $t('绑定'),
        content: $t('确定解绑微信?'),
        success(res) {
            if (res.confirm) {
                api('/wechat/index/unbind').then(e => {
                    api('/wechat/index/logout').then(e => {
                        refresh()
                    })
                })
            }
        },
    })
}


</script>

<style scoped lang="scss">
.content {
    display: flex;
    flex-direction: column;
    width: 100%;

    height: 100%;

    .header {
        display: flex;
        flex-direction: column;
        height: 500rpx;
        color: #fff;
        background: linear-gradient(to bottom, #FF935B, #FD754C);

        .header-row {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 400rpx;
        }
    }

    .bottom {
        display: flex;
        flex-direction: column;
        height: 100rpx;
        background-color: rgba(242, 244, 250, 1);
        align-items: center;
        justify-content: center;
        font-size: 24rpx;
        color: #909399;
    }

    .body {
        margin-top: -100rpx;
        display: flex;
        flex: 1;
        padding-top: 72rpx;
        padding-left: 32rpx;
        padding-right: 32rpx;
        flex-direction: column;
        background-color: rgba(242, 244, 250, 1);
        overflow: hidden;
        border-top-left-radius: 48rpx;
        border-top-right-radius: 48rpx;

        .body-content {
            border-radius: 8px;
            background-color: rgba(255, 255, 255, 1);
            display: flex;
            flex-direction: column;
            color: rgba(102, 102, 102, 1);

            .count {
                background-color: #FD754C;
                color: #fff;
                border-radius: 50%;
                width: 48rpx;
                height: 48rpx;
                line-height: 48rpx;
                display: inline-block;
                text-align: center;
                font-size: 24rpx;
            }


        }

        .progress {
            width: 100%;
            height: 100rpx;
            margin-bottom: 12rpx;

            .progress-text {
                font-size: 28rpx;
                height: 36rpx;
                display: flex;
                flex-wrap: wrap;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 12rpx;
                color: #FD754C;

            }
        }
    }
}
</style>